<template>
	<div class="device">
		<!-- 树形结构 -->
		<div class="device-tree">
			<span>组织树</span>
			<el-tree
				:data="treeInfo"
				default-expand-all
				ref="orgTree"
				:expand-on-click-node="false"
				node-key="value"
				:props="defaultProps"
				@node-click="treeNodeClick"
			></el-tree>
		</div>
		<!-- 内容展示 -->
		<div class="device-show">
			<!-- 工具栏 -->
			<Toolbar>
				<template #left>
					<div class="left-item">录入作战设备</div>
				</template>
				<template #right>
					<div class="right-item">
						<el-button size="small" type="info" @click="save('ruleForm')">保存</el-button>
					</div>
				</template>
			</Toolbar>

			<div class="device-show__card">
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					inline
					label-width="120px"
					class="demo-ruleForm"
				>
					<el-form-item label="通信指挥车" prop="commandVehicle">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.commandVehicle" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">辆</span>
						</div>
					</el-form-item>
					<el-form-item label="卫星电话" prop="satellitePhone">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.satellitePhone" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="单兵图传（3G)" prop="transmissionThree">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.transmissionThree" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="卫星便携站" prop="satelliteTerminal">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.satelliteTerminal" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="单兵图传（4G)" prop="transmissionFour">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.transmissionFour" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="北斗有溶终端" prop="bweidou">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.bweidou" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="无线布控球" prop="controlBall">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.controlBall" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="陀螺仪" prop="gyro">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.gyro" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">个</span>
						</div>
					</el-form-item>
					<el-form-item label="无人机" prop="uav">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.uav" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">架</span>
						</div>
					</el-form-item>
					<el-form-item label="消防车" prop="fireEngine">
						<div class="dfc">
							<el-input type="number" v-model="ruleForm.fireEngine" size="small"></el-input>
							<span style="margin-left: 10px; color: #999">辆</span>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
 
<script>
import { getOrgTreeApi, getDeviceInfoApi, saveDeviceInfoApi } from '@/utils/api';
import { turnPage } from '@/mixins/turnPage';

export default {
	mixins: [turnPage],
	name: 'Device',
	data() {
		return {
			treeInfo: [] /* 树 */,
			defaultProps: {
				children: 'children',
				label: 'name'
			} /* 树形节点名 */,
			orgId: '',
			ruleForm: {
				commandVehicle: '',
				satellitePhone: '',
				transmissionThree: '',
				transmissionFour: '',
				satelliteTerminal: '',
				bweidou: '',
				controlBall: '',
				gyro: '',
				uav: '',
				fireEngine: '',
				orgId: ''
			} /* 表单 */,
			rules: {
				commandVehicle: [{ required: true, message: '请输入通信指挥车数量', trigger: 'blur' }],
				satellitePhone: [{ required: true, message: '请输入卫星电话数量', trigger: 'blur' }],
				transmissionThree: [{ required: true, message: '请输入单兵图传（3G)数量', trigger: 'blur' }],
				transmissionFour: [{ required: true, message: '请输入单兵图传（4G)数量', trigger: 'blur' }],
				satelliteTerminal: [{ required: true, message: '请输入卫星便携站数量', trigger: 'blur' }],
				bweidou: [{ required: true, message: '请输入北斗有溶终端数量', trigger: 'blur' }],
				controlBall: [{ required: true, message: '请输入无线布控球数量', trigger: 'blur' }],
				gyro: [{ required: true, message: '请输入陀螺仪数量', trigger: 'blur' }],
				uav: [{ required: true, message: '请输入无人机数量', trigger: 'blur' }],
				fireEngine: [{ required: true, message: '请输入消防车数量', trigger: 'blur' }]
			} /* 表单校验规则 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			await this.getOrgTree();
		},

		// 获取组织树
		async getOrgTree() {
			const res = await getOrgTreeApi();

			if (res.success) {
				this.treeInfo = res.data;

				this.$nextTick(() => {
					setTimeout(() => {
						this.treeInfo && this.$refs['orgTree'].setCurrentKey(this.treeInfo[0].value);
						this.orgId = this.treeInfo[0].value;
						this.getDeviceInfo();
					});
				});
			} else {
				this.$toast(res.msg);
			}
		},

		async getDeviceInfo() {
			const res = await getDeviceInfoApi({
				orgId: this.orgId
			});

			if (res.success) {
				if (res.data && res.data.length > 0) {
					this.ruleForm.commandVehicle = res.data[0].commandVehicle;
					this.ruleForm.satellitePhone = res.data[0].satellitePhone;
					this.ruleForm.transmissionThree = res.data[0].transmissionThree;
					this.ruleForm.transmissionFour = res.data[0].transmissionFour;
					this.ruleForm.satelliteTerminal = res.data[0].satelliteTerminal;
					this.ruleForm.bweidou = res.data[0].bweidou;
					this.ruleForm.controlBall = res.data[0].controlBall;
					this.ruleForm.gyro = res.data[0].gyro;
					this.ruleForm.uav = res.data[0].uav;
					this.ruleForm.fireEngine = res.data[0].fireEngine;
					this.ruleForm.orgId = res.data[0].orgId;
					this.ruleForm.id = res.data[0].id;
				} else {
					this.ruleForm = {
						commandVehicle: '',
						satellitePhone: '',
						transmissionThree: '',
						transmissionFour: '',
						satelliteTerminal: '',
						bweidou: '',
						controlBall: '',
						gyro: '',
						uav: '',
						fireEngine: '',
						orgId: ''
					};
				}
			} else {
				this.$toast(res.msg);
			}
		},

		// 树形结构的点击
		treeNodeClick(node) {
			this.orgId = node.value;
			this.getDeviceInfo();
		},

		// 保存
		save(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.ruleForm.orgId = this.orgId;
					const res = await saveDeviceInfoApi(this.ruleForm);

					if (res.success) {
						this.$message.success('操作成功');
						this.getDeviceInfo();
					} else {
						this.$toast(res.msg);
					}
				} else {
					return false;
				}
			});
		}
	}
};
</script>
 
<style lang="scss">
.device {
	padding: 20px;
	font-size: 14px;
	display: flex;
	height: calc(100vh - 40px);

	.device-tree {
		min-width: 300px;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #eee;
		box-shadow: $--xy-shadow-deep;

		& > span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 15px 0;
			background-color: rgb(0, 166, 217);
			color: #fff;
		}
	}

	.device-show {
		flex: 1;
		margin-left: 20px;
		border-radius: 3px;
		overflow: hidden;

		&__card {
			margin-top: 20px;
		}
	}

	.toolbar-wrapper {
		height: 50px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}

	.left-item {
		padding-left: 15px;

		& > span {
			font-size: 13px;
			color: #666;
			margin-right: 5px;
		}

		.el-select {
			margin-right: 20px;
		}
	}

	.right-item {
		padding-right: 15px;
	}

	.el-tree {
		padding: 10px;
	}

	.el-form-item {
		width: 46%;
		@include xy-noarrow;

		input {
			width: 280px;
		}
	}

	.el-tree-node.is-current > .el-tree-node__content {
		border: 1px solid #e2e2e2 !important;
		background-color: #f3f3f3;
		border-radius: 2px;
		box-shadow: 2px 3px 5px rgba(170, 170, 170, 0.3);
	}
}
</style>